<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
        <el-form :model="addPrintTaskForm" ref="addPrintTaskFormRef" :rules="addPrintTaskFormRules">
            <el-form-item label="送稿内容" :label-width="formLabelWidth" prop="taskName" style="margin-right: 60px">
                <el-input v-model="addPrintTaskForm.taskName" autocomplete="off" ref="name" placeholder="请填写送稿内容"
                    :rules="addPrintTaskFormRules"></el-input>
            </el-form-item>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="人员姓名" :label-width="formLabelWidth" prop="teacherName">
                        <el-input v-model="addPrintTaskForm.teacherName" autocomplete="off" ref="name" readonly></el-input>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                    <el-form-item label="所在校区" :label-width="formLabelWidth" prop="campusName">
                        <el-input v-model="addPrintTaskForm.campusName" autocomplete="off" ref="name" readonly></el-input>
                    </el-form-item>
                </el-col> -->
                <el-col :span="12">
                    <el-form-item label="使用日期" :label-width="formLabelWidth" prop="useDate">
                        <el-date-picker style="width: 40%" v-model="addPrintTaskForm.useDate" type="date"
                            format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="选择日期" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="送稿科目" :label-width="formLabelWidth" prop="subjectName">
                        <el-input v-model="addPrintTaskForm.subjectName" autocomplete="off" ref="name"
                            placeholder="请填写送稿科目"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="纸张大小" :label-width="formLabelWidth" prop="paperSize">
                        <el-input v-model="addPrintTaskForm.paperSize" autocomplete="off" ref="name"
                            placeholder="请填写纸张大小"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="使用部门" :label-width="formLabelWidth" prop="userDepartment">
                        <el-input v-model="addPrintTaskForm.userDepartment" autocomplete="off" ref="name"
                            placeholder="请填写使用部门"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="使用班级" :label-width="formLabelWidth" prop="userClass">
                        <el-input v-model="addPrintTaskForm.userClass" autocomplete="off" ref="name"
                            placeholder="请填写使用班级"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- <el-form-item label="使用日期" :label-width="formLabelWidth" prop="useDate">
                <el-date-picker style="width: 40%" v-model="addPrintTaskForm.useDate" type="date" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" placeholder="选择日期" />
            </el-form-item> -->
            <el-form-item label="注备" :label-width="formLabelWidth" prop="remark" style="margin-right: 60px">
                <el-input v-model="addPrintTaskForm.remark" autocomplete="off" ref="name" placeholder="请填写注备"></el-input>
            </el-form-item>
            <el-form-item label="附件" :label-width="formLabelWidth" prop="fileUrl">
                <el-upload ref="upload" class="upload-demo" :limit="3" :on-exceed="handleExceed" :auto-upload="false"
                    :file-list="fileList" :on-change="fileChange" :before-remove="handleRemove"
                    :on-preview="handleFilePreview" :before-upload="beforeUploadHandler">
                    <template #trigger>
                        <el-button type="primary" style="margin-right: 10px">选择文件</el-button>
                        <div class="el-upload__tip" style="color: red;">最多同时上传3个文件</div>
                    </template>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="submitTask()">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import addPrintFile from "./addPrintFile";
import { httpService } from "../../utils/httpService";
import { ElMessage, ElForm, ElDatePicker, ElButton, ElRow, ElCol } from "element-plus";
import { vxRule } from '../../utils/validator'
import axios from 'axios';
export default {
    name: "AddPrintTaskForm",
    components: { addPrintFile, ElForm, ElMessage, ElDatePicker, ElButton, ElRow, ElCol },
    data() {
        return {
            UploadUserFile: [],
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            uploadApiUrl: "/pythonApi/printingSystem/uploadFile",
            fileList: [],
            extension: ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'wps', 'pdf', 'jpg', 'jpeg', 'png', 'zip', 'rar', 'rtf'],
            templateUrl: "",
            personnelType: "",
            addPrintTaskForm: {
                taskId: "",
                taskName: "",
                teacherName: "",
                campusName: "",
                departmentName: "",
                userDepartment: "",
                userClass: "",
                useDate: "",
                subjectName: "",
                paperSize: "B4",
                fileUrl: "",
                remark: "",
                id: '',
            },
            // 校验规则
            addPrintTaskFormRules: {
                taskName: vxRule(true, null, "blur"),
                campusName: vxRule(true, null, "blur"),
                teacherName: vxRule(true, null, "blur"),
                departmentName: vxRule(true, null, "blur"),
                userDepartment: vxRule(true, null, "blur"),
                userClass: vxRule(true, null, "blur"),
                paperSize: vxRule(true, null, "blur"),
                useDate: vxRule(true, null, "blur"),
            },
        };
    },
    components: {
        addPrintFile
    },
    methods: {
        fileChange(file, fileList) {
            let fileName = file.name.substring(file.name.lastIndexOf('.') + 1);
            if (this.extension.indexOf(fileName) >= 0) {
                this.fileList = fileList
            } else {
                fileList.splice(-1, 1);
                ElMessage({
                    message: '不支持上传该类型文件',
                    type: 'warning',
                    offset: 400
                })
            }

        },
        handleRemove() {
        },
        handleExceed() {
            ElMessage({
                message: "最多上传3个文件",
                type: "success"
            });
        },
        beforeUploadHandler(file) {
        },
        submitTask() {
            this.$refs.addPrintTaskFormRef.validate((valid) => {
                if (valid) {
                    let params = new FormData(), num = 0; //创建一个form对象,必须是form对象否则后端接受不到数据
                    this.addPrintTaskForm.fileUrl = "";
                    if (this.fileList.length > 0) {
                        for (let i in this.fileList) {
                            if (this.fileList[i].raw) {
                                num += 1;
                                params.append("file", this.fileList[i].raw);
                            } else {
                                this.addPrintTaskForm.fileUrl = this.addPrintTaskForm.fileUrl + ';' + this.fileList[i].url
                            }
                        }
                        let config = { "Content-Type": "multipart/form-data" };
                        httpService(this.uploadApiUrl, params, "post", config).then(
                            (data) => {
                                if (data.code == 200) {
                                    this.addPrintTaskForm.fileUrl = this.addPrintTaskForm.fileUrl + data.url;
                                    let list = new FormData();
                                    list.append('fileUrl', this.addPrintTaskForm.fileUrl);
                                    list.append('taskName', this.addPrintTaskForm.taskName);
                                    list.append('userDepartment', this.addPrintTaskForm.userDepartment);
                                    list.append('useDate', this.addPrintTaskForm.useDate);
                                    list.append('subjectName', this.addPrintTaskForm.subjectName);
                                    list.append('userClass', this.addPrintTaskForm.userClass);
                                    list.append('paperSize', this.addPrintTaskForm.paperSize);
                                    list.append('remark', this.addPrintTaskForm.remark);
                                    if (this.addPrintTaskForm.taskId) {
                                        list.append('taskId', this.addPrintTaskForm.taskId)
                                    }
                                    httpService("/pythonApi/printingSystem/addTask", list, "post").then(
                                        (data) => {
                                            if (data.code == 200) {
                                                ElMessage({
                                                    message: "提交成功",
                                                    type: "success"
                                                });
                                                this.clear();
                                                this.fileList = [];
                                                this.$parent.getTaskList();
                                            } else {
                                                ElMessage({
                                                    message: '提交失败',
                                                    type: 'error'
                                                });
                                            }
                                        }
                                    );
                                } else {
                                    ElMessage.error(data.message);
                                }
                            });
                    } else {
                        ElMessage({
                            message: "请选择文件",
                            type: 'error'
                        });
                    }
                } else {
                    return false
                }
            })
        },
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },
        handleFilePreview(file) {
            let config = { "responseType": "blob" };
            httpService("/pythonApi/printingSystem/getFileData", { fileUrl: file.url }, 'get', config).then(
                (data) => {
                    let fileName = file.name, link = document.createElement('a'),
                        fileUrl = window.URL.createObjectURL(new Blob([data]));
                    link.style.display = 'none';
                    link.href = fileUrl;
                    link.setAttribute('download', fileName);
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    window.URL.revokeObjectURL(fileUrl)
                }
            )
        },
        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.addPrintTaskForm.id = "";
            this.addPrintTaskForm.taskName = "";
            this.addPrintTaskForm.teacherName = "";
            this.addPrintTaskForm.departmentName = "";
            this.addPrintTaskForm.userDepartment = "";
            this.addPrintTaskForm.userClass = "";
            this.addPrintTaskForm.useDate = "";
            this.addPrintTaskForm.subjectName = "";
            this.addPrintTaskForm.paperSize = "";
            this.addPrintTaskForm.fileUrl = "";
            this.addPrintTaskForm.remark = "";
        },
        getPrintTaskFormById(id) {
            httpService("/javaApi/printTaskForm/queryById", { id: id }, "get").then(
                (data) => {
                    console.log(data);
                    this.addPrintTaskForm = data
                    // this.addPrintTaskForm.taskId = id;
                    // this.fileList = data.fileList;
                }
            );
        }
    },
};
</script>
<style></style>